import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, InputNumber, Modal } from 'antd';
import React, { Component } from 'react';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import { TableListItem } from '../data.d';

const FormItem = Form.Item;

// 表单提交额外属性
export interface FormValueType extends Partial<TableListItem> {

}

// 定义 props
export interface UpdateFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formValues?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}

// 定义 state
export interface UpdateFormState {
  formValues: FormValueType;
}

class UpdateForm extends Component<UpdateFormProps, UpdateFormState> {
  // 默认 props
  static defaultProps = {
    handleUpdate: () => { },
    handleUpdateModalVisible: () => { },
    values: {},
  };

  // 可以自定义布局
  formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
  };

  constructor(props: UpdateFormProps) {
    super(props);

    // 初始化 state
    this.state = {
      formValues: {
        id: props.values.id,
        nickname: props.values.nickname,
        remark: props.values.remark,
        rank_num: props.values.rank_num,
        phone: props.values.phone,
        email: props.values.email,
        key: props.values.key,
      },
    };
  }

  okHandle = () => {
    const { form, onSubmit: handleUpdate } = this.props;
    const { formValues: oldValue } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formValues = { ...oldValue, ...fieldsValue };
      this.setState(
        {
          formValues,
        },
        () => {
          handleUpdate(formValues);
        },
      );
    });
  };


  render() {
    const { updateModalVisible, onCancel: handleUpdateModalVisible, values, form } = this.props;
    const { formValues } = this.state;

    return (
      <Modal
        destroyOnClose
        title="编辑管理员"
        bodyStyle={{ padding: '32px 40px 48px' }}
        visible={updateModalVisible}
        onOk={() => this.okHandle()}
        onCancel={() => handleUpdateModalVisible(false, values)}
        afterClose={() => handleUpdateModalVisible()}
      >
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="手机号">
          {form.getFieldDecorator('phone', {
            initialValue: formValues.phone || '',
            rules: [],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="邮箱">
          {form.getFieldDecorator('email', {
            initialValue: formValues.email || '',
            rules: [
              { type: 'email', message: '账户名应为邮箱格式' }
            ],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="用户昵称">
          {form.getFieldDecorator('nickname', {
            initialValue: formValues.nickname || '',
            rules: [],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
          {form.getFieldDecorator('remark', {
            initialValue: formValues.remark || '',
            rules: [],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="排序值">
          {form.getFieldDecorator('rank_num', {
            initialValue: formValues.rank_num || 888,
            rules: [],
          })(<InputNumber placeholder="请输入" style={{ width: '100%' }} min={1} />)}
        </FormItem>
      </Modal>
    );
  }
}

export default Form.create<UpdateFormProps>()(UpdateForm);
